<!DOCTYPE html>
<html lang="zh-CH">
<head>
    <title>易博智的网页</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="./引用头文件/ff.ico">
    <link rel="stylesheet" href="./引用头文件/index.css">
    <link rel="stylesheet" href="./引用头文件/fullpage.min.css">
    <style>
        body {
            display: flex;
            height: 100vh;
            margin: 0;
            padding: 0;
            justify-content: center;
            align-items: center;
        }
    </style>

    <style>
        #inputArea{position: absolute; top: 30%; left: 20%;}
        .keyboardBox{position: fixed; top: 50%; left: 20%; width: 170px; height: 130px; margin: 0; padding: 10px; background-color: #ccc; font-size: 16px;}
        .line{position: relative; height: 50px; line-height: 50px;}
        .keys, .keysCmd, .keys_d{box-sizing: border-box; float: left; width: 45px; height: 45px; line-height: 45px; margin: 0 0 3px 3px; border-radius: 4px; border: 1px solid #333; text-align: center; cursor: pointer; background-color: #fff;}
        .keys:hover, .keysCmd:hover, .keys_d:hover{box-shadow: 0px 0px 3px #333 inset;}
        .keys:active, .keysCmd:active, .keys_d:active{background-color: #dedede;}
        .active{background-color: #dedede; box-shadow: 0px 0px 3px #333 inset;}
        .keys_d{height: 45px; line-height: 20px;}
        .key_enter{width: 102px;}
        .k-w-50{width: 50px;}
        .k-w-70{width: 70px;}
        .k-w-75{width: 75px;}
        .k-w-80{width: 80px;}
        .k-w-100{width: 100px;}
        .k-w-120{width: 120px;}
        .k-w-704{width: 704px;}
        .gap{margin-left: 30px;}
        .gap_t{margin-top: 10px;}
        .line .l-h-40{line-height: 40px;}
        .f-s-14{font-size: 14px;}
        .t-a-l{padding-left: 15px; text-align: left;}
    </style>
</head>

<body style="background-color: #66CCFF">

    <div class="keyboardBox" id="keyboard">
        <div class="line gap_t">
            <div class="keys"> </div>
            <div class="keys" .keyCode="38">↑</div>
            <div class="keys"> </div>
        </div>
        <div class="line">
            <div class="keys" .keyCode="37">←</div>
            <div class="keys" .keyCode="40">↓</div>
            <div class="keys" .keyCode="39">→</div>
        </div>
    </div>

    <canvas id="can" width="400" height="400" style="background-color: black">对不起，您的浏览器不支持canvas</canvas>
    <script>
        var snake = [41, 40],       //snake队列表示蛇身，初始节点存在但不显示
            direction = 1,          //1表示向右，-1表示向左，20表示向下，-20表示向上
            food = 43,              //食物的位置
            n,                      //与下次移动的位置有关
            box = document.getElementById('can').getContext('2d');
                                    //从0到399表示box里[0~19]*[0~19]的所有节点，每20px一个节点
        function draw(seat, color) {
            box.fillStyle = color;
            box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
                                    //用color填充一个矩形，以前两个参数为x，y坐标，后两个参数为宽和高。
        }

        document.onkeydown = function(evt) {    
                                    //当键盘上下左右键摁下的时候改变direction
            direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
        };

        !function() {
            snake.unshift(n = snake[0] + direction);    
                                    //此时的n为下次蛇头出现的位置，n进入队列
            if(snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || direction == 1 && n % 20 == 0 || direction == -1 && n % 20 == 19) {
                                    //if语句判断贪吃蛇是否撞到自己或者墙壁，碰到时返回，结束程序
                return alert("GAME OVER!");

            }
            draw(n, "lime");        //画出蛇头下次出现的位置
            if(n == food) {         //如果吃到食物时，产生一个蛇身以外的随机的点，不会去掉蛇尾
                while (snake.indexOf(food = ~~(Math.random() * 400)) > 0);
                draw(food, "yellow");
            } else {                //没有吃到食物时正常移动，蛇尾出队列
                draw(snake.pop(),"black");
            }
            setTimeout(arguments.callee, 150);      
                                    //每隔0.15秒执行函数一次，可以调节蛇的速度
        }();
    </script>

    <script src="./引用头文件/keyboard.js"></script>
    <script src="./引用头文件/vue.min.js"></script>
    <script src="./引用头文件/vue-fullpage.min.js"></script>
    <script src="./引用头文件/index.js"></script>
</body>
</html>